<template>
  <div class="insurance-app">
    <!-- 标题卡片 -->
    <el-card class="header-card" shadow="hover">
      <div class="header-content">
        <div class="title-section">
          <div class="title-decoration"></div>
          <h1 class="page-title">社保公积金投保系统</h1>
        </div>
        <el-steps :active="1" simple class="process-steps">
          <el-step title="填写投保信息" icon="Edit" />
          <el-step title="确认缴费金额" icon="Money" />
          <el-step title="完成投保" icon="CircleCheck" />
        </el-steps>
      </div>
    </el-card>

    <!-- 投保信息卡片 -->
    <el-card class="form-card" shadow="hover">
      <div class="section-header">
        <div class="section-title-decoration"></div>
        <h2 class="section-title">投保信息</h2>
      </div>
      
      <el-form :model="formData" label-width="150px" class="modern-form">
        <el-row :gutter="30">
          <!-- 第一行 -->
          <el-col :span="8">
            <el-form-item label="参保方案" required>
              <el-select 
                v-model="formData.insuranceScheme" 
                placeholder="请选择参保方案"
                class="modern-select"
                @change="handleInsuranceSchemeChange"
              >
                <el-option 
                  v-for="option in insuranceSchemeOptions"
                  :key="option.id"  
                  :label="option.name"  
                  :value="option.name"  
                >
                  <div class="option-content">
                    <span class="option-label">{{ option.name }}</span>  
                    <el-tag size="small" type="success">推荐</el-tag>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          
           <el-col :span="8">
      <el-form-item label="社保参保省份" required>
        <el-select 
          v-model="formData.socialSecurityCity" 
          placeholder="请选择社保参保省份"
          class="modern-select"
        >
          <el-option 
            v-for="province in provinces" 
            :key="province.value" 
            :label="province.label" 
            :value="province.value"
          >
            <div class="option-content">
              <el-icon><Location /></el-icon>
              <span class="option-label">{{ province.label }}</span>
            </div>
          </el-option>
        </el-select>
      </el-form-item>
    </el-col>
          
         <el-col :span="8">
      <el-form-item label="公积金参保省份" required>
        <el-select 
          v-model="formData.socialSecurityCity" 
          placeholder="请选择公积金参保省份"
          class="modern-select"
        >
          <el-option 
            v-for="province in provinces" 
            :key="province.value" 
            :label="province.label" 
            :value="province.value"
          >
            <div class="option-content">
              <el-icon><Location /></el-icon>
              <span class="option-label">{{ province.label }}</span>
            </div>
          </el-option>
        </el-select>
      </el-form-item>
    </el-col>

          <!-- 第二行 -->
        <el-form :model="formData" label-width="150px" class="modern-form">
  <el-row :gutter="30">
    <!-- 其他固定字段... -->
    
    <!-- 动态渲染社保部分 -->
    <template v-for="(item, index) in shebaoDetails" :key="'shebao_' + index">
      <el-col :span="8">
        <el-form-item :label="item.insuranceType" :prop="'shebao_' + index" 
                     :rules="getValidationRules(item.baseMin, item.baseMax)">
          <el-input 
            v-model.number="formData['shebao_' + index]" 
            type="number"
            class="modern-input"
            :placeholder="`请输入${item.insuranceType}基数 (${item.baseMin}-${item.baseMax})`"
            :min="item.baseMin"
            :max="item.baseMax"
          >
            <template #prefix>
              <span class="input-prefix">¥</span>
            </template>
          </el-input>
          <div class="input-tips">范围: {{ item.baseMin }} - {{ item.baseMax }}</div>
        </el-form-item>
      </el-col>
    </template>
    
    <!-- 动态渲染公积金部分 -->
    <template v-for="(item, index) in gjjDetails" :key="'gjj_' + index">
      <el-col :span="8">
        <el-form-item :label="item.insuranceType" :prop="'gjj_' + index"
                     :rules="getValidationRules(item.baseMin, item.baseMax)">
          <el-input 
            v-model.number="formData['gjj_' + index]" 
            type="number"
            class="modern-input"
            :placeholder="`请输入${item.insuranceType}基数 (${item.baseMin}-${item.baseMax})`"
            :min="item.baseMin"
            :max="item.baseMax"
          >
            <template #prefix>
              <span class="input-prefix">¥</span>
            </template>
          </el-input>
          <div class="input-tips">范围: {{ item.baseMin }} - {{ item.baseMax }}</div>
        </el-form-item>
      </el-col>
    </template>
  </el-row>
</el-form>

          <!-- 第四行 -->
          <el-col :span="8">
            <el-form-item label="参保起始月份" required>
              <el-date-picker 
                v-model="formData.insuranceStartDate" 
                type="month" 
                placeholder="选择月份"
                class="modern-date-picker"
              >
                <template #prefix>
                  <el-icon><Calendar /></el-icon>
                </template>
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 缴费金额卡片 -->
    <!-- 缴费金额卡片 -->
<el-card class="payment-card" shadow="hover">
  <div class="section-header">
    <div class="section-title-decoration"></div>
    <h2 class="section-title">缴费金额</h2>
    <el-button 
      type="primary" 
      icon="Refresh" 
      @click="fetchData"
      class="refresh-btn"
    >
      重新计算
    </el-button>
  </div>
  
  <el-table 
    :data="paymentData" 
    class="modern-table"
    :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
  >
    <el-table-column prop="item" label="项目" width="180">
      <template #default="{ row }">
        <div class="payment-item">
          <el-icon v-if="row.item === '社保'" class="item-icon"><Box /></el-icon>
          <el-icon v-else-if="row.item === '公积金'" class="item-icon"><Coin /></el-icon>
          <el-icon v-else class="item-icon"><PriceTag /></el-icon>
          <span>{{ row.item }}</span>
        </div>
      </template>
    </el-table-column>
    
    <el-table-column prop="personalPayment" label="个人缴费">
      <template #default="{ row }">
        <div class="payment-amount personal">
          ¥{{ row.personalPayment }}
        </div>
      </template>
    </el-table-column>
    
    <el-table-column prop="companyPayment" label="企业缴费">
      <template #default="{ row }">
        <div class="payment-amount company">
          ¥{{ row.companyPayment }}
        </div>
      </template>
    </el-table-column>
    
    <el-table-column prop="totalPayment" label="缴费合计">
      <template #default="{ row }">
        <div class="payment-amount total">
          ¥{{ row.totalPayment }}
        </div>
      </template>
    </el-table-column>
  </el-table>
  
  <div class="payment-summary">
    <div class="summary-item">
      <span class="summary-label">个人总计:</span>
      <span class="summary-value personal">¥{{ paymentSummary.personalTotal }}</span>
    </div>
    <div class="summary-item">
      <span class="summary-label">企业总计:</span>
      <span class="summary-value company">¥{{ paymentSummary.companyTotal }}</span>
    </div>
    <div class="summary-item total">
      <span class="summary-label">缴费总额:</span>
      <span class="summary-value">¥{{ paymentSummary.grandTotal }}</span>
    </div>
  </div>
</el-card>
    
    <!-- 操作按钮 -->
    <div class="action-buttons">
    <el-button class="save-btn" icon="DocumentAdd" @click="goBack">取消</el-button>
    <el-button 
      type="primary" 
      class="submit-btn" 
      icon="CircleCheck"
      @click="submitForm"
      :disabled="!formData.insuranceScheme || !formData.insuranceStartDate"
    >
      提交投保
    </el-button>
  </div>



  </div>
</template>

<script setup>
import { ref, onMounted  } from 'vue'
import {getDistinctNames,getInsurancetypes ,addZd} from '@/api/tb/tb'
import { ElLoading, ElMessage } from 'element-plus'
import { useRouter } from 'vue-router' // 引入 useRouter
import {
  Location,
  Calendar,
  Box,
  Coin,
  PriceTag,
  Edit,
  Money,
  CircleCheck,
  DocumentAdd,
  Refresh
} from '@element-plus/icons-vue'


const route = useRoute() // 初始化路由实例

const shebaoDetails = ref([])
const gjjDetails = ref([])

// 动态生成验证规则
const getValidationRules = (min, max) => {
  return [
    { required: true, message: '请输入有效数值', trigger: 'blur' },
    { 
      type: 'number', 
      min: min, 
      max: max, 
      message: `数值必须在 ${min} 到 ${max} 之间`, 
      trigger: ['blur', 'change'] 
    }
  ]
}

// 处理参保方案变化
const handleInsuranceSchemeChange = async (value) => {
  try {
    const response = await getInsurancetypes(value)
    if (response.code === 200) {
      shebaoDetails.value = response.data.shebaoDetails || []
      gjjDetails.value = response.data.gjjDetails || []
       const selectedOption = insuranceSchemeOptions.value.find(option => option.name === value)
      if (selectedOption) {
        formData.value.insurancePlanId = selectedOption.id
      }
      
      // 初始化表单数据
      initFormData()
    }
  } catch (error) {
    ElMessage.error('获取参保类型失败: ' + error.message)
  }
}

// 初始化表单数据
const initFormData = () => {
  const newFormData = {}
  
  // 设置社保部分初始值
  shebaoDetails.value.forEach((item, index) => {
    newFormData[`shebao_${index}`] = item.baseMin || 0
  })
  
  // 设置公积金部分初始值
  gjjDetails.value.forEach((item, index) => {
    newFormData[`gjj_${index}`] = item.baseMin || 0
  })
  
  // 保留原有的表单数据
  formData.value = { ...formData.value, ...newFormData }
}

const router = useRouter() // 初始化路由实例
const goBack = () => {
  router.go(-1)
}




const getInsuranceData = async () => {
  try {
    const response = await getInsurancetypes()
    if (response.code === 200) {
      shebaoDetails.value = response.data.shebaoDetails
      gjjDetails.value = response.data.gjjDetails
      // 初始化 formData 中的动态字段
      shebaoDetails.value.forEach((_, index) => {
        formData.value[`shebao_${index}`] = 0
      })
      gjjDetails.value.forEach((_, index) => {
        formData.value[`gjj_${index}`] = 0
      })
    }
  } catch (error) {
    console.error('获取保险类型数据失败:', error)
    ElMessage.error('获取保险类型数据失败，请重试')
  }
}

// 计算缴费金额数据
const paymentData = computed(() => {
  const shebaoItems = []
  const gjjItems = []
  let personalTotal = 0
  let companyTotal = 0
  
  // 计算社保各项
  shebaoDetails.value.forEach((item, index) => {
    const base = formData.value[`shebao_${index}`] || 0
    const personalPayment = (base * item.personalRatio / 100).toFixed(2)
    const companyPayment = (base * item.companyRatio / 100).toFixed(2)
    
    personalTotal += parseFloat(personalPayment)
    companyTotal += parseFloat(companyPayment)
    
    shebaoItems.push({
      item: item.insuranceType,
      personalPayment,
      companyPayment,
      totalPayment: (parseFloat(personalPayment) + parseFloat(companyPayment)).toFixed(2)
    })
  })
  
  // 计算公积金各项
  gjjDetails.value.forEach((item, index) => {
    const base = formData.value[`gjj_${index}`] || 0
    const personalPayment = (base * item.personalRatio / 100).toFixed(2)
    const companyPayment = (base * item.companyRatio / 100).toFixed(2)
    
    personalTotal += parseFloat(personalPayment)
    companyTotal += parseFloat(companyPayment)
    
    gjjItems.push({
      item: item.insuranceType,
      personalPayment,
      companyPayment,
      totalPayment: (parseFloat(personalPayment) + parseFloat(companyPayment)).toFixed(2)
    })
  })
  
  // 合并所有项目
  const allItems = [
    ...shebaoItems,
    ...gjjItems,
    {
      item: '合计',
      personalPayment: personalTotal.toFixed(2),
      companyPayment: companyTotal.toFixed(2),
      totalPayment: (personalTotal + companyTotal).toFixed(2)
    }
  ]
  
  // 按社保、公积金分组显示
  const groupedItems = []
  
  if (shebaoItems.length > 0) {
    const shebaoGroup = {
      item: '社保',
      personalPayment: shebaoItems.reduce((sum, item) => sum + parseFloat(item.personalPayment), 0).toFixed(2),
      companyPayment: shebaoItems.reduce((sum, item) => sum + parseFloat(item.companyPayment), 0).toFixed(2),
      totalPayment: shebaoItems.reduce((sum, item) => sum + parseFloat(item.totalPayment), 0).toFixed(2)
    }
    groupedItems.push(shebaoGroup)
  }
  
  if (gjjItems.length > 0) {
    const gjjGroup = {
      item: '公积金',
      personalPayment: gjjItems.reduce((sum, item) => sum + parseFloat(item.personalPayment), 0).toFixed(2),
      companyPayment: gjjItems.reduce((sum, item) => sum + parseFloat(item.companyPayment), 0).toFixed(2),
      totalPayment: gjjItems.reduce((sum, item) => sum + parseFloat(item.totalPayment), 0).toFixed(2)
    }
    groupedItems.push(gjjGroup)
  }
  
  // 添加合计
  if (groupedItems.length > 0) {
    groupedItems.push({
      item: '总计',
      personalPayment: personalTotal.toFixed(2),
      companyPayment: companyTotal.toFixed(2),
      totalPayment: (personalTotal + companyTotal).toFixed(2)
    })
  }
  
  return groupedItems
})














const formData = ref({
   insurancePlanId: '', // 新增字段
  insuranceScheme: '',
  socialSecurityCity: 'shanghai',
  providentFundCity: 'shanghai',
  insuranceStartDate: '',
  // 动态字段会在 handleInsuranceSchemeChange 中初始化
})

// 提交表单数据
const submitForm = async () => {
  try {
    const loading = ElLoading.service({
      lock: true,
      text: '正在提交投保信息...',
    })

    // 计算个人、公司和总缴费金额
    const { personal_payment, company_payment, total_payment } = calculateTotalPayments()

    // 准备要提交的数据
    const payload = {
      personalPayment: parseFloat(personal_payment), // 转换为数字类型
      companyPayment: parseFloat(company_payment), // 转换为数字类型
      totalPayment: parseFloat(total_payment), // 转换为数字类型
      paymentMonth: formatPaymentMonth(formData.value.insuranceStartDate),
      paymentStatus: 'pending', // 默认状态
      insurancePlanId: Number(formData.value.insurancePlanId), // 转换为数字类型
       employeeNumber: route.query.employeeNumber || '', 
      // createdAt 和 updatedAt 由后端处理，前端可不传
    }

    // 调用API提交数据
    const response = await addZd(payload)

    loading.close()

    if (response.code === 200) {
      ElMessage.success('投保信息提交成功')
    } else {
      ElMessage.error(response.msg || '提交失败')
    }
  } catch (error) {
    ElMessage.error('提交出错: ' + error.message)
  }
}

// 格式化投保年月为YYYY-MM
const formatPaymentMonth = (date) => {
  if (!date) return ''
  const d = new Date(date)
  const year = d.getFullYear()
  const month = String(d.getMonth() + 1).padStart(2, '0')
  return `${year}-${month}`
}

// 准备各险种缴费明细
const preparePaymentDetails = () => {
  const details = []
  
  // 处理社保部分
  shebaoDetails.value.forEach((item, index) => {
    const base = formData.value[`shebao_${index}`] || 0
    details.push({
      insurance_type: item.insuranceType,
      base_amount: base,
      personal_ratio: item.personalRatio,
      company_ratio: item.companyRatio,
      personal_payment: (base * item.personalRatio / 100).toFixed(2),
      company_payment: (base * item.companyRatio / 100).toFixed(2)
    })
  })
  
  // 处理公积金部分
  gjjDetails.value.forEach((item, index) => {
    const base = formData.value[`gjj_${index}`] || 0
    details.push({
      insurance_type: item.insuranceType,
      base_amount: base,
      personal_ratio: item.personalRatio,
      company_ratio: item.companyRatio,
      personal_payment: (base * item.personalRatio / 100).toFixed(2),
      company_payment: (base * item.companyRatio / 100).toFixed(2)
    })
  })
  
  return details
}

// 计算个人、公司和总缴费金额
const calculateTotalPayments = () => {
  let personalTotal = 0
  let companyTotal = 0
  
  // 计算社保部分
  shebaoDetails.value.forEach((item, index) => {
    const base = formData.value[`shebao_${index}`] || 0
    personalTotal += base * item.personalRatio / 100
    companyTotal += base * item.companyRatio / 100
  })
  
  // 计算公积金部分
  gjjDetails.value.forEach((item, index) => {
    const base = formData.value[`gjj_${index}`] || 0
    personalTotal += base * item.personalRatio / 100
    companyTotal += base * item.companyRatio / 100
  })
  
  return {
    personal_payment: personalTotal.toFixed(2),
    company_payment: companyTotal.toFixed(2),
    total_payment: (personalTotal + companyTotal).toFixed(2)
  }
}




















// 计算汇总数据
const paymentSummary = computed(() => {
  const personalTotal = paymentData.value
    .filter(item => item.item !== '总计')
    .reduce((sum, item) => sum + parseFloat(item.personalPayment), 0)
  
  const companyTotal = paymentData.value
    .filter(item => item.item !== '总计')
    .reduce((sum, item) => sum + parseFloat(item.companyPayment), 0)
  
  return {
    personalTotal: personalTotal.toFixed(2),
    companyTotal: companyTotal.toFixed(2),
    grandTotal: (personalTotal + companyTotal).toFixed(2)
  }
})
const insuranceSchemeOptions = ref([]) // 参保方案选项
const fetchData = async () => {
  try {
    const loading = ElLoading.service({
      target: '.payment-card',
      text: '正在计算缴费金额...'
    })
    
    // 这里可以添加实际API调用逻辑
    // 目前我们使用计算属性自动计算，所以只需要模拟延迟
    await new Promise(resolve => setTimeout(resolve, 500))
    
    loading.close()
    ElMessage.success('缴费金额已更新')
  } catch (error) {
    console.error('Error fetching data:', error)
    ElMessage.error('计算失败，请重试')
  }
}
// 全国省份数据
const provinces = ref([
  { value: 'beijing', label: '北京市' },
  { value: 'tianjin', label: '天津市' },
  { value: 'hebei', label: '河北省' },
  { value: 'shanxi', label: '山西省' },
  { value: 'innerMongolia', label: '内蒙古自治区' },
  { value: 'liaoning', label: '辽宁省' },
  { value: 'jilin', label: '吉林省' },
  { value: 'heilongjiang', label: '黑龙江省' },
  { value: 'shanghai', label: '上海市' },
  { value: 'jiangsu', label: '江苏省' },
  { value: 'zhejiang', label: '浙江省' },
  { value: 'anhui', label: '安徽省' },
  { value: 'fujian', label: '福建省' },
  { value: 'jiangxi', label: '江西省' },
  { value: 'shandong', label: '山东省' },
  { value: 'henan', label: '河南省' },
  { value: 'hubei', label: '湖北省' },
  { value: 'hunan', label: '湖南省' },
  { value: 'guangdong', label: '广东省' },
  { value: 'guangxi', label: '广西壮族自治区' },
  { value: 'hainan', label: '海南省' },
  { value: 'chongqing', label: '重庆市' },
  { value: 'sichuan', label: '四川省' },
  { value: 'guizhou', label: '贵州省' },
  { value: 'yunnan', label: '云南省' },
  { value: 'tibet', label: '西藏自治区' },
  { value: 'shaanxi', label: '陕西省' },
  { value: 'gansu', label: '甘肃省' },
  { value: 'qinghai', label: '青海省' },
  { value: 'ningxia', label: '宁夏回族自治区' },
  { value: 'xinjiang', label: '新疆维吾尔自治区' },
  { value: 'hongKong', label: '香港特别行政区' },
  { value: 'macao', label: '澳门特别行政区' },
  { value: 'taiwan', label: '台湾省' }
])

const fetchInsuranceSchemes = async () => {
  try {
    const response = await getDistinctNames()
    insuranceSchemeOptions.value = response.data.map(item => ({
      name: item.name,  // 显示方案名称
      id: item.id       // 使用方案 ID
    }))
    if (insuranceSchemeOptions.value.length > 0) {
      formData.value.insuranceScheme = insuranceSchemeOptions.value[0].id  // 使用方案 ID 初始化
    }
  } catch (error) {
    console.error('获取参保方案失败:', error)
    ElMessage.error('获取参保方案失败，请重试')
  }
}

onMounted(() => {
  fetchInsuranceSchemes()
  fetchData()
})
</script>

<style scoped lang="scss">
.insurance-app {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
  
  .header-card {
    margin-bottom: 20px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #f6f9fc 0%, #e9f2fb 100%);
    
    .header-content {
      padding: 20px;
      
      .title-section {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        
        .title-decoration {
          width: 4px;
          height: 24px;
          background: linear-gradient(to bottom, #409EFF, #67C23A);
          border-radius: 2px;
          margin-right: 12px;
        }
        
        .page-title {
          margin: 0;
          font-size: 24px;
          font-weight: 600;
          color: #303133;
          background: linear-gradient(to right, #409EFF, #67C23A);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
      
      .process-steps {
        :deep(.el-step) {
          .el-step__head {
            &.is-process {
              color: #409EFF;
              border-color: #409EFF;
            }
          }
          
          .el-step__title {
            font-size: 15px;
            font-weight: 500;
            
            &.is-process {
              color: #409EFF;
              font-weight: 600;
            }
          }
        }
      }
    }
  }
  
  .form-card, .payment-card {
    margin-bottom: 20px;
    border: none;
    border-radius: 12px;
    overflow: hidden;
    
    .section-header {
      display: flex;
      align-items: center;
      margin-bottom: 25px;
      position: relative;
      
      .section-title-decoration {
        width: 4px;
        height: 20px;
        background: linear-gradient(to bottom, #409EFF, #67C23A);
        border-radius: 2px;
        margin-right: 12px;
      }
      
      .section-title {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: #303133;
      }
      
      .refresh-btn {
        margin-left: auto;
        border-radius: 6px;
        padding: 8px 16px;
      }
    }
  }
  
  .modern-form {
    padding: 0 20px;
    
    .el-row {
      margin-bottom: 10px;
    }
    
    .modern-select {
      :deep(.el-input__inner) {
        height: 40px;
        line-height: 40px;
        border-radius: 8px;
        padding-left: 15px;
      }
      
      :deep(.el-input__suffix) {
        display: flex;
        align-items: center;
      }
    }
    
    .modern-input {
      :deep(.el-input__inner) {
        height: 40px;
        line-height: 40px;
        border-radius: 8px;
        padding-left: 30px;
      }
      
      .input-prefix {
        color: #999;
        margin-right: 5px;
      }
    }
    
    .modern-date-picker {
      :deep(.el-input__inner) {
        height: 40px;
        line-height: 40px;
        border-radius: 8px;
        padding-left: 35px;
      }
      
      :deep(.el-input__prefix) {
        display: flex;
        align-items: center;
        left: 10px;
      }
    }
    
    .option-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      
      .option-label {
        margin-right: 10px;
      }
    }
  }
  
  .modern-table {
    border-radius: 8px;
    margin: 0 auto;
    
    :deep(.el-table__header) {
      th {
        font-weight: 600;
      }
    }
    
    :deep(.el-table__body) {
      tr:hover td {
        background-color: #f5f9ff !important;
      }
    }
    
    .payment-item {
      display: flex;
      align-items: center;
      
      .item-icon {
        margin-right: 8px;
        color: #409EFF;
      }
    }
    
    .payment-amount {
      font-weight: 500;
      
      &.personal {
        color: #E6A23C;
      }
      
      &.company {
        color: #67C23A;
      }
      
      &.total {
        color: #409EFF;
        font-weight: 600;
      }
    }
  }
  
  .payment-summary {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    padding: 15px;
    background-color: #f5f7fa;
    border-radius: 8px;
    
    .summary-item {
      display: flex;
      align-items: center;
      margin-left: 30px;
      
      &.total {
        margin-left: 40px;
        
        .summary-label {
          font-weight: 600;
        }
        
        .summary-value {
          font-size: 18px;
          color: #409EFF;
        }
      }
      
      .summary-label {
        color: #606266;
        margin-right: 8px;
      }
      
      .summary-value {
        font-weight: 500;
        
        &.personal {
          color: #E6A23C;
        }
        
        &.company {
          color: #67C23A;
        }
      }
    }
  }
  
  .action-buttons {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    gap: 20px;
    
    .save-btn {
      padding: 12px 24px;
      border-radius: 8px;
      font-weight: 500;
    }
    
    .submit-btn {
      padding: 12px 36px;
      border-radius: 8px;
      font-weight: 500;
      background: linear-gradient(to right, #409EFF, #67C23A);
      border: none;
      
      &:hover {
        opacity: 0.9;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
      }
    }
  }
}

@media (max-width: 992px) {
  .insurance-app {
    padding: 15px;
    
    .modern-form {
      .el-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
      }
    }
    
    .payment-summary {
      flex-direction: column;
      align-items: flex-end;
      
      .summary-item {
        margin: 5px 0;
        
        &.total {
          margin: 10px 0 0;
        }
      }
    }
  }
}
</style>